<template>
  <div class="zhuolan">
     <button class="bofang" @click="serch()">搜索音乐</button>
     <button class="bofang" @click="noplay">---关闭</button>
     <input type="text" v-model="namemus" class="shuyu">
      <audio class="bofangqi" :src="idurl2"  autoplay loop v-if="ifshow"></audio>
      <div  class="kuan" v-for="(item,index) in musicsurl" :key="index">
           <button class="anniu" @click="play(item.id)"></button>{{ item.name }}
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'myBody1',
  data(){
       return{
        namemus:'林俊杰',
        idurl:'',
        musicsurl:[],
        idurl2:'',
        ifshow:true
       }
  },
  methods:{
    noplay(){
         this.ifshow = !this.ifshow
    },  
  serch(){ 
      var that = this 
      axios.get("https://autumnfish.cn/search?keywords="+this.namemus)
      .then(
        function(response){
          console.log(response)
          that.musicsurl = response.data.result.songs
          console.log(that.musicsurl)
          },
        )
    },
    play(id){
      var that = this 
      axios.get("https://autumnfish.cn/song/url?id="+id)
      .then(
        function(response){
          console.log(response)
          that.idurl2= response.data.data[0].url
          console.log(that.idurl2)
          },
        )
    }
}}
</script>

<style scoped>
  .zhuolan{
   position: absolute;
   z-index: 10;
   top: 100px;
   left: 100px;
   text-align: center;
   width: 200px;
   height: 80%;
   border-radius: 20px;

   background-color: aqua;
  }
  .zhuolan:hover{
    box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
  }
  .bofang{
    margin: 0 auto;
    border: 0;
    
  border-radius: 20%;
  display: inline-block;
  background-color: aqua;
 }
 .bofang:hover{
   background-color:brown;
 }
.shuyu{
  text-align: center;
  border: 0;
}
 .anniu{
  width: 15px;
  height: 15px;
  background-color: aqua;
 }
  .anniu:hover{
   background-color:brown;
 }
 .kuan{
  overflow: hidden;
  width: 200px;

 }
</style>